
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.roomId"
        placeholder="房号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleNameFilter"
      />
      <el-input
        v-model="listQuery.propName"
        placeholder="姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleNameFilter"
      />
      <el-input
        v-model="listQuery.idCard"
        placeholder="身份证号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleNameFilter"
      />
      <el-input
        v-model="listQuery.tel"
        placeholder="电话号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleNameFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>
    <!-- 数据列表 -->
    <el-table
      ref="mutipleTable"
      class="tb-edit"
      :data="allList.slice((page-1)*limit,page*limit)"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        fixed
        prop="pid"
        label="序号"
        width="65"
      />
      <el-table-column
        prop="roomId"
        label="房号"
      />
      <el-table-column
        prop="propName"
        label="姓名"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
      />
      <el-table-column
        prop="tel"
        label="电话号"
      />
      <el-table-column
        prop="carId"
        label="车位号"
      />
      <el-table-column
        prop="carType"
        label="车辆型号"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="170"
      >
        <template slot-scope="{row}">
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row.pid)"
          >删除</el-button>
          <el-button
            size="small"
            type="success"
            @click="handleUpdate(row)"
          ><span>编辑</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加、修改弹出框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="序号" prop="pid">
          <el-input v-model="temp.pid" disabled />
        </el-form-item>
        <el-form-item label="门牌号" prop="roomId">
          <el-input v-model="temp.roomId" />
        </el-form-item>
        <el-form-item label="姓名" prop="propName">
          <el-input v-model="temp.propName" />
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="temp.idCard" />
        </el-form-item>
        <el-form-item label="电话号" prop="tel">
          <el-input v-model="temp.tel" />
        </el-form-item>
        <el-form-item label="车位号" prop="carId">
          <el-input v-model="temp.carId" />
        </el-form-item>
        <el-form-item label="车辆型号" prop="carType">
          <el-input v-model="temp.carType" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>

import waves from '@/directive/waves'
import { addProp, deleteProp, propList, updateProp } from '@/api/prop'
export default {
  inject: ['reload'],
  directives: { waves },
  data() {
    return {
      // 查询条件的封装
      allList: null,
      list: null,
      page: 1,
      limit: 10,
      total: '',
      listQuery: {
        propName: '',
        idCard: '',
        roomId: '',
        tel: ''
      },
      display: true,
      tableData: [],
      temp: { pid: '', roomId: '', propName: '', idCard: '', tel: '', carId: '', carType: '', uid: '' },
      multipleSelection: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      dialogPvVisible: false,
      rules: {
        roomId: [
          { required: true, message: '请输入房号，例 H1001', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        propName: [
          { required: true, message: '请输入业主姓名', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入正确的身份证号', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { min: 7, max: 11, message: '请输入正确的联系方式', trigger: 'change' }
        ]
      }
    }
  },
  mounted() { // mounted钩子函数（生命周期函数）相当window.onload函数，随页面一加载执行
  // 单一网络请求在student.js经过封装统一处理，这里需要导入这个文件
    this.getAllList()
  },
  methods: {
    getAllList() {
      propList().then(res => {
        this.allList = res.data
        this.total = res.data.length
      })
    },
    handleSizeChange: function(size) {
      this.limit = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.page = currentPage // 点击第几页
    },
    handleFilter() {
      this.page = 1
      this.getAllList()
    },
    // 选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    resetTemp() {
      this.temp = {
        pid: '',
        uid: undefined,
        roomId: '',
        propName: '',
        idCard: '',
        tel: '',
        carId: '',
        carType: ''
      }
    },
    // 增加
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addProp(this.temp).then((ref) => {
            console.log(this.dataForm)
            ref.data = this.temp
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            this.reload()
          })
        }
      })
    },
    // 更新
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateProp(this.temp).then((ref) => {
            ref.data = this.temp
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
          this.reload()
        }
      })
    },
    // 删除
    handleDelete(pid) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteProp(pid).then((res) => {
          this.$notify({
            type: 'success',
            message: '删除成功!'
          })
          this.reload()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
.el-form-item label{
  text-align: end;
}
</style>
